<template>
    <div class="order-tab">
        <nut-tabs v-model="tab" title-scroll title-gutter="10" name="tab" @click="changeTab">
            <nut-tab-pane v-for="(item, index) in tabList" :title="item.title" :pane-key="item.key">
                <div class="order-list" v-if="tab == item.key">
                    <div class="order-item" v-for="(item, index) in orderList" :key="item.id"
                        v-if="orderList.length > 0"
                        @click="jumpTo(item.orderStatus, '/packageA/pages/orderDetail/index?orderNo=' + item.orderNo + '&orderStatus=' + item.orderStatus)">
                        <div class="order-head flex-a flex-b">
                            <div>订单编号：{{ item.orderNo }}</div>
                            <div>
                                <!-- {{ item.orderStatus < 0 ? '已取消' : item.orderStatus == 0 ? '未支付' : item.orderStatus == 1
                                ? '已支付' : item.orderStatus == 3 ? '待支付' : item.orderStatus == 4 ? '已完成' : '退货' }} -->
                                <nut-tag color="#E9E9E9" text-color="#999999"
                                    v-if="(item.orderStatus == -2 || item.orderStatus == -1 || item.orderStatus == -3) && item.newBeeMallOrderItemVOS[0].isRef == null">
                                    已取消</nut-tag>
                                <nut-tag type="primary" v-if="item.orderStatus == 0">待支付</nut-tag>
                                <nut-tag type="success" v-if="item.orderStatus == 1">已支付</nut-tag>
                                <nut-tag type="success" v-if="item.orderStatus == 2">已配货</nut-tag>
                                <nut-tag type="success" v-if="item.orderStatus == 3">已出库</nut-tag>
                                <nut-tag type="success" v-if="item.orderStatus == 4">已完成</nut-tag>
                                <!-- <nut-tag color="#E9E9E9" text-color="#999999"
                                    v-if="item.orderStatus == -1">已关闭</nut-tag>
                                <nut-tag color="#E9E9E9" text-color="#999999"
                                    v-if="item.orderStatus == -2">超时关闭</nut-tag>
                                <nut-tag color="#E9E9E9" text-color="#999999"
                                    v-if="item.orderStatus == -3">商家关闭</nut-tag> -->
                                <nut-tag type="warning"
                                    v-if="item.orderStatus == 5 && item.newBeeMallOrderItemVOS[0].isRef != null">售后</nut-tag>
                            </div>
                        </div>
                        <div class="flex order-content" v-for="ele in item.newBeeMallOrderItemVOS" :key="ele.goodsId">
                            <div class="left">
                                <img :src="ele.goodsCoverImg" alt="">
                            </div>
                            <div class="middle">
                                <div>{{ ele.goodsName }}</div>
                                <div>{{ item.info }}</div>
                                <div>{{ ele.specName }}</div>
                            </div>
                            <div class="right">
                                <div>￥{{ ele.sellingPrice + '' }}</div>
                                <div>x{{ ele.goodsCount }}</div>
                            </div>
                        </div>
                        <div class="order-foot">
                            <div class="total">共{{ item.total }}件商品 <text>合计：￥{{ item.totalPrice }}</text></div>
                            <div class="check-order flex-a">
                                <!-- <div v-if="item.orderStatus == 1" class="no">
                                    <text>德邦快递: {{ text }}</text>
                                    <img @click.stop="copy(text)" src="https://s1.ax1x.com/2023/07/11/pCWkHPg.png" alt="">
                                </div> -->
                                <nut-button type="default" color="#F5F6F8" size="mini" style="color: #242630;"
                                    v-if="item.orderStatus == 4 || item.orderStatus == 3"
                                    @click.stop="checkOrder(item, index)">查看物流</nut-button>
                                <nut-button type="default" size="mini" v-if="item.orderStatus == 0"
                                    @click.stop="resetOrder(item, index)">取消订单</nut-button>
                                <!-- <nut-button type="default" size="mini" color="#8DCF00" v-if="item.orderStatus == 3"
                                    @click.stop="confirmOrder(item, index)">确认收货</nut-button> -->
                                <sure-btn :orderNo="item.orderNo" :transactionId="item.transactionId"
                                    v-if="item.orderStatus == 3"></sure-btn>
                                <nut-button type="default" size="mini" color="#F5F6F8" style="color: #242630;"
                                    v-if="item.orderStatus == 4 && item.isRead == 0"
                                    @click.stop="jumpTo('', '/packageA/pages/evaluate/index?goodsId=' + item.newBeeMallOrderItemVOS[0].goodsId + '&orderNo=' + item.orderNo)">评价</nut-button>
                                <!-- <nut-button type="default" size="mini" color="#8DCF00"
                                    v-if="item.orderStatus == 4 && item.isRead == 1"
                                    @click.stop="jumpTo('', '/packageA/pages/evaluate/index?goodsId=' + item.newBeeMallOrderItemVOS[0].goodsId + '&orderNo=' + item.orderNo + '&type=detail')">查看评价</nut-button> -->
                                <nut-button type="danger" size="mini" @click.stop="delOrder(item, index)"
                                    v-if="item.orderStatus == -1 || item.orderStatus == -2 || item.orderStatus == -3">删除订单</nut-button>
                                <nut-button type="info" size="mini" color="#8DCF00" v-if="item.orderStatus == 0"
                                    @click.stop="jumpTo('', '/packageA/pages/confirmPay/index?addressId=' + item.addressId + '&orderId=' + item.orderNo)">去支付</nut-button>
                                <!-- <nut-button type="default" color="#8DCF00" v-if="item.refStatus == 2"
                                    @click.stop="editNo(item)">填写快递单号</nut-button> -->
                            </div>
                        </div>
                    </div>
                    <nut-empty v-else description="无数据"></nut-empty>
                </div>
            </nut-tab-pane>
        </nut-tabs>
        <nut-popup position="bottom" closeable round :style="{ height: '20%' }" v-model:visible="showBottom"
            class="tknum">
            <nut-form>
                <nut-form-item label="快递单号">
                    <nut-input v-model="tkNum" class="nut-input-text" placeholder="请输入快递单号" type="text" />
                </nut-form-item>
                <div class="btn"><nut-button type="info" size="small" @click="submit">提交</nut-button></div>
            </nut-form>
        </nut-popup>
        <!-- <nut-popup position="bottom" closeable round :style="{ height: '50%' }" v-model:visible="confirmShow"
            class="confirm-box">
            <div class="title">请确认已收到商品并检查无误</div>
            <div class="flex">
                <div>支付金额</div>
                <div class="price">¥1200.55</div>
            </div>
            <div class="flex">
                <div>商品信息</div>
                <div>花王(KAO)馨香洗衣液优雅玫瑰香京东特供JOY组合</div>
            </div>
            <div class="flex">
                <div>交易单号</div>
                <div>4200001619202210252589359957</div>
            </div>
            <div class="flex">
                <div>支付时间</div>
                <div>2022年10月28日 12:35:26</div>
            </div>
            <div class="flex">
                <div>发货方式</div>
                <div>用户自提</div>
            </div>
            <div class="btn">
                <nut-button type="default" size="mini" color="#8DCF00" @click.stop="">确认收货</nut-button>
            </div>
        </nut-popup> -->
    </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { useReachBottom } from '@tarojs/taro';
// import { requirePlugin } from '@tarojs/taro';
// import mitt from "../../../utils/mitt";
import { reactive, toRefs, onMounted } from 'vue';
import { getOrderList, cancelOrder, finishOrder, removeOrder, refOrder, subTknum, getWaybillToken, selectStoreQuery } from '../../../api/index'
export default {
    components: {

    },
    setup() {
        // const myPluginInterface = requirePlugin('logisticsPlugin')
        const data = reactive({
            confirmShow: true,
            waybillToken: '',
            tab: 99 as any,
            orderList: [] as any[],
            tabList: [
                {
                    title: '全部',
                    key: 99,
                },
                {
                    title: '待付款',
                    key: 0,
                },
                {
                    title: '待发货',
                    key: 2,
                },
                {
                    title: '待收货',
                    key: 3,
                },
                {
                    title: '待评价',
                    key: 1,
                },
                {
                    title: '售后',
                    key: -1
                },
            ],
            pageNumber: 1,
            text: 'DPK364116621912',
            showBottom: false,
            refOrderNo: '',
            tkNum: '',
            token: ''
        });

        onMounted(() => {
            const router = useRouter();
            if (router.params.status) {
                data.tab = router.params.status
                getOrder(router.params.status)
            } else {
                getOrder(99)
            }
        });
        const changeTab = (title) => {
            data.tab = title.paneKey
            data.pageNumber = 1
            data.orderList = []
            getOrder(title.paneKey)
        }
        const getOrder = (tab) => {
            if (tab == 5) {
                refOrder({ pageNumber: data.pageNumber }).then(res => {
                    if (res.resultCode == 200) {
                        res.data.list.forEach(item => {
                            data.orderList.push(item)
                        });
                    }
                })
            } else {
                getOrderList({
                    pageNumber: data.pageNumber,
                    status: tab,
                    read: tab == 1 ? '1' : null
                }).then(res => {
                    if (res.resultCode == 200) {
                        let list = res.data.list
                        list.forEach(item => {
                            let num = 0
                            item.newBeeMallOrderItemVOS.forEach(ele => {
                                num += ele.goodsCount
                            })
                            item.total = num
                            data.orderList.push(item)
                        })
                    }
                })
            }

        }
        const jumpTo = (status, path) => {
            if (status != 6) {
                Taro.navigateTo({ url: path });
            }
        }
        useReachBottom(() => {
            //console.log('onReachBottom')
            data.pageNumber++
            getOrder(data.tab)
        })
        const resetOrder = (item, index) => {
            cancelOrder(item.orderNo).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '取消成功',
                        icon: 'success',
                        duration: 2000
                    })
                    data.orderList[index].orderStatusString = '手动关闭'
                    data.orderList[index].orderStatus = -1
                    getOrder(data.tab)
                }
            })
        }
        const confirmOrder = (item, index) => {
            finishOrder(item.orderNo).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '收货成功',
                        icon: 'success',
                        duration: 2000
                    })
                    data.orderList[index].orderStatusString = '已完成'
                    data.orderList[index].orderStatus = 4
                }
            })
        }
        const delOrder = (item, index) => {
            removeOrder(item.orderId).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '删除成功',
                        icon: 'success',
                        duration: 2000
                    })
                    data.orderList.splice(index, 1)
                }
            })
        }
        const copy = (text: string) => {
            Taro.setClipboardData({
                data: text,
            }).then(() => {
                Taro.showToast({
                    title: '已复制到剪切板',
                    icon: 'none'
                })
            })
        }
        const editNo = (item) => {
            data.refOrderNo = item.refOrderNo
            data.showBottom = true
        }
        const submit = () => {
            subTknum(data.refOrderNo, data.tkNum).then(res => {
                if (res.resultCode == 200) {
                    Taro.showToast({
                        title: '提交成功',
                        icon: 'success',
                        duration: 2000
                    })
                    data.showBottom = false
                    getOrder(data.tab)
                }
            })
        }
        const checkOrder = (item, index) => {
            // getWaybillToken(item.orderNo).then(res => {
            //     if (res.resultCode == 200) {
            //         data.token = res.message
            //         myPluginInterface.openWaybillTracking({
            //             waybillToken: res.message
            //         });
            //     }
            // })
            jumpTo('', '/packageA/pages/empty/index?orderNo=' + item.orderNo)
        }
        return {
            ...toRefs(data), changeTab, jumpTo, getOrder, copy, resetOrder, confirmOrder, delOrder, editNo, submit, checkOrder
        }
    }
};
</script>
<style lang="scss">
.order-tab {
    .nut-tab-pane {
        padding: 0;
    }

    .order-list {
        padding: 20rpx 15rpx 50rpx 15rpx;
        background: #E9E9E9;
        min-height: 100vh;

        .order-item {
            margin-bottom: 10rpx;
            background: #fff;
            border-radius: 10rpx;
            box-sizing: border-box;
            padding: 0 30rpx;

            .order-head {
                border-bottom: 1rpx solid #F2F2F2;
                padding: 20rpx 0;
                color: #9E9090;
                font-size: 28rpx;

                div:last-child {
                    font-size: 26rpx;
                }
            }

            .order-content {
                padding: 30rpx 0 10rpx;
                border-bottom: 1rpx solid #F2F2F2;

                .left {
                    img {
                        width: 200rpx;
                        height: 200rpx;
                    }

                    margin-right: 20rpx;
                }

                .middle {
                    width: 60%;

                    div:first-child {
                        font-size: 26rpx;
                        margin-bottom: 20rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }

                    div:last-child {
                        color: #6B7283;
                        font-size: 24rpx;
                    }
                }

                .right {
                    text-align: right;

                    div:first-child {
                        font-size: 34rpx;
                        font-weight: bold;
                        margin-bottom: 20rpx;
                        white-space: nowrap;
                    }

                    div:last-child {
                        color: #6B7283;
                    }
                }
            }

            .order-foot {
                .total {
                    text-align: right;
                    padding: 30rpx 0;
                    font-size: 26rpx;

                    text {
                        margin-left: 30rpx;
                    }
                }

                .check-order {
                    text-align: right;
                    padding-bottom: 20rpx;
                    justify-content: flex-end;

                    .no {
                        white-space: nowrap;
                        width: 60%;

                        text {
                            display: inline-block;
                            width: 90%;
                            color: #999;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }

                        img {
                            width: 40rpx;
                            height: 40rpx;
                        }
                    }

                    .nut-button {
                        border-radius: 10rpx;
                        margin-left: 10rpx;
                        width: 120rpx;
                        white-space: nowrap;
                        font-size: 20rpx;
                    }
                }
            }

        }
    }
}

.tknum {
    .nut-popup {
        padding-top: 80rpx;
    }

    .btn {
        text-align: center;

        .nut-button {
            width: 60%;
            margin: 20rpx auto;
        }
    }
}

.confirm-box {
    .nut-popup {
        padding-top: 80rpx;
    }

    .title {
        font-weight: bold;
        font-size: 26rpx;
        text-align: center;
        margin: 50rpx auto 50rpx;
    }

    div.flex {
        padding: 0 60rpx;
        box-sizing: border-box;
        font-size: 22rpx;
        color: #616161;
        margin-bottom: 20rpx;

        div:first-child {
            width: 140rpx;
            text-align: left;
            color: #BBBBBB;
        }

        div:last-child {
            font-weight: bold;
        }

        div.price {
            font-size: 34rpx;
            color: #212121;
        }
    }

    .btn {
        text-align: center;
        margin-top: 80rpx;

        .nut-button {
            margin: 0 auto;
            border-radius: 10rpx;
            width: 200rpx;
            height: 60rpx;
        }
    }
}
</style>